<template>
    <div class="module-two">
        <div class="wrap">
            <Row class="module-title">
                <Col span="24">
                    <h3>微站优势</h3>
                </Col>
            </Row>

            <div class="ico-list g-mt50">
                <ul class="clearfix">
                    <li class="ico-list-item" v-for="item in icoList" :key="item.id">
                        <i class="sb-bg website"></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Row from 'iview/src/components/row'
    import Col from 'iview/src/components/Col'

    export default {
        data() {
            return {
                icoList: []
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                for(var i = 0 ; i < 27; i++){
                    this.icoList.push(1);
                }
            }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~@/common/stylus/variable.styl"
    @import "~@/common/stylus/mixin.styl"

    .module-two
        padding: 60px 0 40px
        height: 646px
        background-image: url('module_two_bg.png')
        background-repeat: no-repeat
        background-size: cover
        .module-title
            color: $white
        .ico-list
            li.ico-list-item
                font-size: 0
                float: left
                i.sb-bg
                    wh(142px, 142px)
                    margin-right: -9px

    @media (max-width: 1200px)
      .module-two
        height: auto
      .module-two .ico-list li.ico-list-item i.sb-bg
        margin-right: 11px
</style>
